<template>
  <base-window :title="$t('common.task.button.review')" size="large" :show.sync="visible" width="700px" class="task-feedback-dialog">
    <div class="base-modal-content task-feedback-dialog">
      <div v-if="!customerSatisfaction">
        <div class="form-view-row">
          <label>{{$t('task.detail.components.serviceDegree')}}</label>
          <div class="form-view-row-content">
            <label class="degree-item" v-for="item in degreeOption" :key="item.value">
              <input type="radio" class="hidden" name="degree" :value="item.value" v-model="form.degree" :disabled="!allowModify || readonly" />
              <!-- <span :class="['evaluate-degree-img', getDegreeImg(item, form.degree == item)]"></span> -->
              <i class="iconfont" :class="getDegreeImg(item.value, form.degree == item.value)"></i>
              <span class="degree-text">{{ item.label }}</span>
            </label>
          </div>
        </div>
        <div class="form-view-row" v-if="evaluateConfig.useStarEvaluate && starEvaluates.length">
          <label>{{$t('task.detail.components.serviceEvaluate')}}</label>
          <div class="star-evaluate-row-content">
            <div class="star-evaluate-row" v-for="(name, index) in starEvaluates" :key="index">
              <div class="star-title">{{ name }}</div>
              <base-service-star :value="starValue[starFeilds[index]]" @input="marks(starFeilds[index], $event)" :handle="allowModify"></base-service-star>
            </div>
          </div>
        </div>
        <div class="form-view-row" v-if="evaluateConfig.useTagEvaluate && tagEvaluates.length">
          <label>{{$t('task.detail.components.serviceTag')}}</label>
          <div class="form-view-row-content evaluate-tag">
            <label class="tag-item" v-for="name in tagEvaluates" :key="name">
              <input type="checkbox" class="hidden" :value="name" v-model="tagValue" :disabled="!allowModify || readonly">
              <span class="evaliate-tag-item">{{ name }}</span>
            </label>
          </div>
        </div>
        <div class="form-view-row" v-if="evaluateContent">
          <label>{{$t('task.customerEvaluation')}}</label>
          <div class="form-view-row-content">{{ evaluateContent }}</div>
        </div>
      </div>
      <div v-if="customerSatisfaction" class="detail-evaluated" v-loading="showLoading">
        <iframe id="iframepage" ref="iframePage" :src="iframeUrl" height="350px" width="100%"/>
      </div>

      <div class="form-view-row form-view-row__comment">
        <label>{{$t('task.detail.components.evaluateSuggestion')}}</label>
        <div class="form-view-row-content">
          <!-- <textarea v-model="form.suggestion" placeholder="请填写回访备注[最多500字]" rows="3" maxlength="500" :readonly="readonly" style="width: 100%;" /> -->
          <biz-at-textarea class="biz-at-textarea" ref="atTextarea" search-url="/message/user/lists" name-key="displayName" v-model="form.suggestion" :at-users.sync="atUsers">
            <template slot="item" slot-scope="item">
              <img :src="head(item.user.head)">
              <span>{{item.user.displayName}}</span>
            </template>
            <textarea ref="editor" class="base-at-textarea" @input="inputContent" :placeholder="$t('task.detail.components.feedbackPlaceholder1')" maxlength="500" :rows="3" :readonly="readonly"></textarea>
          </biz-at-textarea>
        </div>
      </div>
      <div v-if="from == 'reviewList' && (task.linkMan || (task.tlmName && task.tlmPhone))" class="form-view-row">
        <label>{{$t('common.base.contact')}}</label>
        <div class="form-view-row-content">
          {{task.linkMan && task.linkMan.name || task.tlmName}}&nbsp;&nbsp;{{task.linkMan && task.linkMan.phone || task.tlmPhone}}
          <el-tooltip :content="$t('common.base.dial')" placement="top" v-if="showCallPhone">
            <i class="iconfont icon-dianhua2" @click.stop="makePhoneCall"></i>
          </el-tooltip>
          <el-button v-if="!readonly && task.linkMan && task.linkMan.phone ||task.tlmPhone" type="primary" size="mini" @click="payVisit" :disabled="pending">{{$t('task.detail.components.sendEvaluateSms')}}</el-button>
        </div>
      </div>
      <h4 v-if="task.isReviewed===3 || task.isReviewed===1" class="form-view-row">{{$t('task.detail.components.dynamicUpdate')}}</h4>
      <div v-if="task.isReviewed===3 || task.isReviewed===1">
        <div class="task-timeline" ref="timeline">
          <base-timeline 
            :data="reviewInfo" 
            :record-render="renderRecord" 
            :loading="recordLoading"
            :loadmore="hasNextPage"
            @load="loadmore"
          />
        </div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false" v-if="!evaluateConfig.autoCloseTask || readonly">{{$t('common.base.cancel')}}</el-button>
      <el-button type="primary" @click="submit(false,'temporaryStorageReview')" :disabled="pending" v-if="!readonly">{{$t('common.base.temporarySave')}}</el-button>
      <el-button type="primary" @click="submit(false,'reviewTask')" :disabled="pending" v-if="!readonly">{{$t('task.detail.components.finishReview')}}</el-button>
      <el-button class="close-task-btn" @click="submit(true,'reviewTask')" :disabled="pending" v-if="evaluateConfig.autoCloseTask && !readonly">{{$t('task.detail.components.reviewAndCloseTask')}}</el-button>
    </div>
  </base-window>
</template>

<script>
/* api */
import * as TaskApi from '@src/api/TaskApi.ts';

/* util */
import _ from 'lodash';
import { getRootWindowInitData } from '@src/util/window'
import Platform from '@src/util/platform'
import { cutAtTextContent } from 'pub-bbx-utils'

window.Platform = Platform
const rootWindowInitData = getRootWindowInitData()
import { getOssUrl } from '@src/util/assets'
const defaultAvatar = getOssUrl('/avatar.png')
import {enCodeAtText, getReceivers, atTextToUsers} from '@src/util/atText'
import { useTenantId, useRootUser } from '@hooks/useRootWindow.ts';
import { ctiCallOut } from '@src/util/ctisdk';
const RELOAD_TABS = ['frame_tab_M_TASK_REVIEW'];
function createAttachmentDom(h, attachments, type){
  return attachments && attachments.length > 0 
    ? <div class={ `base-timeline-attachment base-file__preview ${type}` }>
      {attachments.map(item => <base-file-item Source={attachments} file={item} key={item.id} readonly size="small"/>)}
    </div> 
    : ''
}
export default {
  name: 'task-feedback-dialog',
  props: {
    from: {
      type: String,
      default: ''
    },
    readonly: {
      type: Boolean,
      default: false
    },
    // 是否submit成功后使用自定义的刷新页面方法
    isCustomerRefresh: {
      type: Boolean,
      default: false
    },
    task: {
      type: Object,
      default: () => ({})
    },
    evaluateConfig: {
      type: Object,
      default: () => ({}),
    },
    proposeApprove: {
      type: Function
    }
  },
  data() {
    return {
      showLoading: false,
      iframeUrl: '',
      visible: false,
      pending: false,
      // TODO 国际化待办 value参数为中文
      degreeOption: [{
        value: '非常满意',
        label: this.$t('task.detail.components.verySatisfied'),
      }, {
        value: '满意',
        label: this.$t('task.detail.components.satisfied'),
      }, {
        value: '一般',
        label: this.$t('task.detail.components.commonly'),
      }, {
        value: '不满意',
        label: this.$t('task.detail.components.dissatisfied'),
      }, {
        value: '非常不满意',
        label: this.$t('task.detail.components.veryDissatisfied'),
      }],
      // degreeOption: ['满意', '一般', '不满意'],
      allowModify: true, // 是否可以修改客户评价
      hasFeedback: false, // 是否回访过
      evaluateContent: '', // 客户评价(自动回访)
      starValue: {}, // 选择的服务评价
      tagValue: [], // 选择的服务标签
      form: this.buildForm(),
      recordLoading: false,
      hasNextPage: false,
      reviewInfo: [],
      reviewInfoList:[],
      reviewInfoLoadNum:0,
      atUsers:[]
    }
  },
  computed: {
    starEvaluates(){
      return this.evaluateConfig.starEvaluates || [];
    },
    starFeilds(){
      return this.evaluateConfig.starEvaluateFeilds || [];
    },
    tagEvaluates(){
      return this.evaluateConfig.tagEvaluates || [];
    },
    showCallPhone() {
      let hasCallCenterModule = localStorage.getItem('call_center_module') == 1;
      return hasCallCenterModule && (this.task.linkMan && this.task.linkMan.phone && this.task.linkMan.phone != '***' || this.task.tlmPhone && this.task.tlmPhone != '***');
    },
    customerSatisfaction() {
      // 展示回访问卷方案设置
      return rootWindowInitData?.customerSatisfaction
    }
  },
  methods: {
    renderRecord(h, record) {
      let { action, userName, content, attachments, taskNo } = record;
      
      return this.renderTaskReviewDom(record);
    },
    renderBaseTaskAction({ action, userName, taskNo }) {
      return <h5> <strong>{userName}</strong> {this.$t('task.record.actionTask', {action})} #{taskNo}。</h5>
    },
    renderTaskReviewDom(record = {}) {
      let { content } = record;
      let degree = ''; 
      let tag = '';
      let star = [];
      let reviewArr = []; 
      // TODO 国际化待办
      record.action = content.temp ? this.$t('common.base.temporarySave') : record.action === '回访' ? this.$t('task.detail.components.finishReview') : record.action;
      for (let name in content){
        let value = content[name] || '';
        let arr = value.split('[ + + ]');
        let data = { name, oldValue: arr[0], newValue: arr[1] }
        
        if (name == '满意度') {
          degree = _.cloneDeep(data);
        } else if (name == '服务标签') {
          tag = _.cloneDeep(data);
        } else {
          star.push(data);
        }
      }
        
      if (degree) reviewArr.push(degree)
      if (star) reviewArr = reviewArr.concat(star)
      if (tag) reviewArr.push(tag)
      
      return [
        this.renderBaseTaskAction(record),
        reviewArr.filter(v =>(v.name !== 'temp')).map(review => {
          return <div>
            <strong>{ review.name }</strong> {this.$t('common.base.via')} <strong>{ review.oldValue }</strong> {this.$t('customer.batchEditingCustomerDialog.fixField.inputLabel')} <strong><biz-comment-html html={ review.newValue }></biz-comment-html></strong>
          </div>
        })
      ]
    },
    getDegreeImg(type, selected) {
      const arr = this.degreeOption
      let className = '';
      switch(true) {
      case arr[0].value: {
        className = selected ? 'icon-feichangmanyi verySatisfied' : 'icon-feichangmanyi';
        break;
      }
      case arr[1].value: {
        className = selected ? 'icon-manyi satisfied' : 'icon-manyi';
        break;
      }
      case arr[2].value: {
        className = selected ? 'icon-yiban commonly' : 'icon-yiban';
        break;
      }
      case arr[3].value: {
        className = selected ? 'icon-bumanyi disSatisfied' : 'icon-bumanyi';
        break;
      }
      case arr[4].value: {
        className = selected ? 'icon-feichangbumanyi veryDissatisfied' : 'icon-feichangbumanyi';
        break;
      }
      default: {
        className = selected ? 'icon-feichangmanyi verySatisfied' : 'icon-feichangmanyi';
        break;
      }
      }
      return className;
    },
    marks(feild, value){
      if(this.readonly) return 
      this.$set(this.starValue, feild, value);
    },
    buildForm() {
      // TODO 国际化待办
      return {
        taskId: this.task.id,
        degree: '满意',
        suggestion: '',
        evaluate: {
          tagEvaluates: this.tagValue,
          ...this.starValue
        }
      }
    },
    getSplit(data, num){
      return data.slice(0, num)
    },
    loadmore() {
      this.reviewInfoLoadNum += 10;
      this.hasNextPage = this.reviewInfoList.length > this.reviewInfoLoadNum;
      this.reviewInfo = this.getSplit(this.reviewInfoList, this.reviewInfoLoadNum)
    },
    async openDialog() {
      try {
        this.showLoading = true;
        // 初始化数据
        this.atUsers = []
        this.starValue = {};
        this.tagValue = [];
        this.form = this.buildForm();

        const infoparams = {taskId: this.task.id, action: this.$t('common.task.button.review')};
        let res = await TaskApi.queryCustomerReviewInfo(infoparams);
        let list = res?.result;
        list.forEach(record => {
          record.content = JSON.parse(record.content);
        })
        this.reviewInfoList = list;
        this.reviewInfoLoadNum = 0;
        this.hasNextPage = this.reviewInfoList.length > 2;
        this.reviewInfo = this.getSplit(this.reviewInfoList, 2);
        this.form.suggestion = this.task.suggestion || '';
        this.atUsers = atTextToUsers(this.form.suggestion).users || []
        this.form.suggestion = atTextToUsers(this.form.suggestion).content || ''
        if(this.customerSatisfaction){
          this.visible = true;
          this.hasFeedback = !!(this.task.isEvaluated === 1 || this.task.isReviewed === 1);
          this.allowModify = !(this.hasFeedback && !this.evaluateConfig.modifyEvaluate);
          this.iframeUrl = `/pcoperation/task/evaluate?id=${ this.task.id }&tenantId=${ this.task.tenantId }&allowModify=${ this.allowModify }&isReviewed=${ this.task.isReviewed }&isEvaluated=${ this.task.isEvaluated}`;
          return;
        }
        let result = {};
        if(this.task.isReviewed === 3){
          const params = {taskId: this.task.id};
          result = await TaskApi.getReviewTempInfoByTaskId(params);
        }
        // 判断是否回访过
        if (this.task.isEvaluated === 1 || this.task.isReviewed === 1 || this.task.isReviewed === 3) {
          this.hasFeedback = !!(this.task.isEvaluated === 1 || this.task.isReviewed === 1);
          this.form.degree = this.task.degree || result.result && result.result.degree;
          this.form.suggestion = this.task.suggestion || result.result && result.result.suggestion || '';
          this.atUsers = atTextToUsers(this.form.suggestion).users || []
          this.form.suggestion = atTextToUsers(this.form.suggestion).content || ''
          this.evaluateContent = this.task.evaluateContent || '';
          this.form.evaluate = this.task.evaluateObj || this.task.esTaskEvaluateEntity || result.result && result.result.esTaskEvaluateEntity || {};

          // 服务标签
          if(this.evaluateConfig.useTagEvaluate && this.form.evaluate.tagEvaluates) {
            this.tagValue = this.tagEvaluates.filter(tags => {
              return this.form.evaluate.tagEvaluates.some(tag => tags == tag);
            })
          }

          // 服务评价
          if(this.evaluateConfig.useStarEvaluate && this.starEvaluates.length) {
            this.starEvaluates.forEach((item, i) => {
              let value = this.form.evaluate[this.starFeilds[i]];
              this.$set(this.starValue, this.starFeilds[i], value || 0);
            })
          }
        }

        // 若已回访过并且满意度设置禁用评价内容可修改时，不可修改
        this.allowModify = !(this.hasFeedback && !this.evaluateConfig.modifyEvaluate);
        this.visible = true;
      } catch (error) {
        console.log(error);
      }
    },
    sendMessage(data){
      this.$refs.iframePage.contentWindow.postMessage(data, '*');
    },
    async submit(autoClosed, action) {
      if(this.customerSatisfaction){
        let receivers = ''
        let query = ''
        let suggestion = this.form.suggestion
        if(this.atUsers.length > 0){
          suggestion = enCodeAtText(this.form.suggestion, this.atUsers);
          receivers = getReceivers(this.form.suggestion, this.atUsers)
          let queryData = {
            receivers,
            tenantId: useTenantId().value,
            content: cutAtTextContent(this.form.suggestion),
            sendUserName: useRootUser().value?.displayName,
            bizId: this.task.id,
            bizNo: this.task.taskNo,
          };
          query = '?';
          for (let i in queryData) {
            query += `&${i}=${queryData[i]}`;
          }
        }
        this.sendMessage({autoClosed, suggestion, query, buttonType: action});
        this.pending = true;
        return
      }
      let { useStarEvaluate, starEvaluateNotNull } = this.evaluateConfig;

      // 服务评星必填校验
      if(useStarEvaluate && starEvaluateNotNull) {
        let message = [];
        for(let i = 0; i < this.starEvaluates.length; i++) {
          let name = this.starEvaluates[i];
          if(!this.starValue[this.starFeilds[i]]) {
            message.push(this.$t('task.tip.feedbackTip2', {name}));
          }
        }

        // 允许修改客户评价时
        if(message.length > 0 && this.allowModify) return this.$platform.alert(message.join('\n'));
      }

      this.pending = true;

      const checkParams = {
        id: this.task.id,
        degree: this.form.degree,
        suggestion: enCodeAtText(this.form.suggestion, this.atUsers),
        evaluateObj: this.form.evaluate
      }

      _.assign(checkParams.evaluateObj, this.starValue);
      checkParams.evaluateObj.tagEvaluates = this.tagValue;

      const params = _.cloneDeep(this.form);
      params.autoClosed = autoClosed;

      let receivers = ''
      let query = ''
      if(this.atUsers.length > 0){
        params.suggestion = enCodeAtText(this.form.suggestion, this.atUsers);
        receivers = getReceivers(this.form.suggestion, this.atUsers)
        let queryData = {
          receivers,
          tenantId: useTenantId().value,
          content: cutAtTextContent(this.form.suggestion),
          sendUserName: useRootUser().value?.displayName,
          bizId: this.task.id,
          bizNo: this.task.taskNo,
        };
        query = '?';
        for (let i in queryData) {
          query += `&${i}=${queryData[i]}`;
        }
      }

      // 先判断是否需要高级审批 这里有回访/ 回访并关闭按钮 action待确定
      let approveParams = {
        taskId: this.task.id,
        action: 'review',
        reviewInfo: {
          ...params,
          isNewReview: false,
        }
      }

      const approveResult = await TaskApi.checkNeedVipApprove(approveParams);
      if (approveResult?.success && approveResult?.result?.needVipApprove) {
        this.visible = false;
        this.pending = false;

        if (typeof this.proposeApprove == 'function') return this.proposeApprove(approveResult.result);
        return this.$emit('proposeApprove', approveResult?.result ?? {});
      }

      // 回访是否需要审批
      const result = await this.$http.post(`/task/approve/degreeForView?autoClosed=${autoClosed}${query ? query.slice(1) : ''}`, checkParams);
      
      // TODO 需要审批判断改成errorCode
      if (action === 'reviewTask' && !result.succ && Number(result.errorCode) == 10003) {
        this.visible = false;
        this.pending = false;

        if (typeof this.proposeApprove == 'function') return this.proposeApprove(result.data);

        return this.$emit('proposeApprove', result.data);
      }
      if (action === 'reviewTask' && !await this.$platform.confirm(this.$t('task.tip.feedbackTip3'))) return this.pending = false;


      
      TaskApi[action](params, query).then((res) => {
        if (res.success) {
          this.$platform.notification({
            type: 'success',
            title: action === 'reviewTask' ? this.$t('task.tip.feedbackTip4') : this.$t('common.base.temporarySaveSuccess')
          })

          this.pending = false

          if(!this.isCustomerRefresh) {
            let fromId = window.frameElement.getAttribute('fromid');
            if (RELOAD_TABS.indexOf(fromId) == -1) return window.location.reload();
            // 延迟1s刷新
            setTimeout(() => {
              this.$platform.refreshTab(fromId);
              window.location.reload();
            }, 1000)
          } else {
            this.$emit('refresh')
            this.visible = false
          }

        } else {
          this.$platform.alert(res.message);
          this.pending = false;
        }
      })
        .catch((err) => {
          this.pending = false;
        })
    },
    // 发送回访信息
    async payVisit() {
      this.$track.clickStat(this.$track.formatParams('SEND_REVIEW_MESSAGE'));
      try {
        let confirm = await this.$platform.confirm(this.$t('task.tip.feedbackTip5'));
        if (confirm) {
          const params = {type: 'ARTIFICIAL', contentList: [this.task.id]};
          const { message } = await TaskApi.sendReviewMessage(params);
          this.$track.clickStat(this.$track.formatParams('SEND_REVIEW_MESSAGE_SUCCESS'));
          this.$platform.alert(message);
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 拨打电话
    async makePhoneCall() {
      let tel = this.task?.linkMan?.phone || this.task?.tlmPhone || ''
      if(!tel) return
      try {
        ctiCallOut(tel)
      } catch (error) {
        console.error(error);
      }
    },
    head(src) {
      if (!src) return defaultAvatar
      return src
    },
    inputContent(event){
      let value = event.target.value;
      this.form.suggestion = value;
    },
  },
  mounted(){
    let that = this;
    function onMessage(messageEvent){
      if(messageEvent.data.showDate){
        that.showLoading = messageEvent.data.showLoading;
      }
      if(messageEvent.data.suggestion){
        that.form.suggestion = messageEvent.data.suggestion;
        that.atUsers = atTextToUsers(that.form.suggestion).users || []
        that.form.suggestion = atTextToUsers(that.form.suggestion).content || ''
      }
      if(messageEvent.data.approveRequired){
        that.visible = false;
        that.pending = false
        if(typeof that.proposeApprove == 'function') return that.proposeApprove(messageEvent.data.result);
        return that.$emit('proposeApprove', messageEvent.data.result);
      }
      if(messageEvent.data.errorTips) {
        that.pending = false
        return
      }

      if (messageEvent.data.checkData) {
        that.pending = false
        that.$platform.notification({
          type: 'error',
          title: messageEvent.data.message
        })
        return
      }

      // 修复回访多个账号点击多次报错未抛出问题
      if (messageEvent.data.checkReview) {
        that.$platform.notification({
          type: 'error',
          title: messageEvent.data.message
        })
        that.pending = false

        // 刷新页面
        let fromId = window.frameElement.getAttribute('fromid');
        if (RELOAD_TABS.indexOf(fromId) == -1) return window.location.reload();
        // 延迟1s刷新
        setTimeout(() => {
          that.$platform.refreshTab(fromId);
          window.location.reload();
        }, 1000)
        return
      }

      if(messageEvent.data.show){
        that.$platform.notification({
          type: 'success',
          title: messageEvent.data.message
        })
        that.pending = false

        if(!that.isCustomerRefresh) {
          let fromId = window.frameElement.getAttribute('fromid');
          if (RELOAD_TABS.indexOf(fromId) == -1) return window.location.reload();
          // 延迟1s刷新
          setTimeout(() => {
            that.$platform.refreshTab(fromId);
            window.location.reload();
          }, 1000)
        } else {
          that.$emit('refresh')
          that.visible = false
        }
      }
    }
    window.addEventListener('message', onMessage)
    this.$once('hook:beforeDestroy', () =>  window.removeEventListener('message', onMessage))
  },
}
</script>

<style lang="scss">
.task-feedback-dialog {
  .detail-evaluated{
    margin-bottom: 20px;
  }
  .form-view-row {
    // padding: 8px 0px;

    .degree-item{
      width: auto !important;
      margin-right: 16px;
      cursor: pointer;
    }

    // .tag-item {
    //   margin-right: 0px;
    // }
    // .el-button--mini {
    //   padding: 4px 8px;
    //   margin-left: 8px;
    // }
    .icon-feichangmanyi,.icon-manyi,.icon-yiban,.icon-bumanyi,.icon-feichangbumanyi{
      color:#595959!important;
      font-size:24px;
      width: 24px;
      height: 24px;
      line-height: 24px;
      margin-right: 2px;
      display: inline-block;
      vertical-align: middle;
    }
    .verySatisfied{
      color: #52c41a!important;
    }
    .satisfied {
      color: #26c8ff!important;
    }
    .commonly {
      color: #ffa726!important;
    }
    .disSatisfied {
      color: #ff7043!important;
    }
    .veryDissatisfied {
      color: #d9363e!important;
    }
  }

  .close-task-btn {
    max-width: 120px !important;
  }
  .form-view-row__comment{
    .form-view-row-content{
      overflow: visible;
    }
  }
}

.evaluate-degree-img {
  width: 24px;
  height: 24px;
  margin-right: 2px;
  display: inline-block;
  vertical-align: middle;

  background: url(../../../../../assets/img/task/review-degree.png) no-repeat;
  background-size: 24px 144px;

  &.review-degree-satisfy {
    background-position: 0 0;
  }

  &.review-degree-commonly {
    background-position: 0 -24px;
  }

  &.review-degree-unsatisfy {
    background-position: 0 -48px;
  }

  &.review-degree-satisfy-active {
    background-position: 0 -72px;
  }

  &.review-degree-commonly-active {
    background-position: 0 -96px;
  }

  &.review-degree-unsatisfy-active {
    background-position: 0 -120px;
  }
}

.star-evaluate-row-content {
  flex: 1;

  .star-evaluate-row {
    display: flex;
    margin-bottom: 10px;

    .star-title {
      width: 86px;
      margin-right: 6px;
    }
  }
}

.evaluate-tag {
  .evaliate-tag-item {
    display: inline-block;
    padding: 2px 8px;
    margin: 0 10px 10px 0;
    font-size: 12px;
    border: 1px solid #e5e5e5;
    background-color: #f8f7f6;
    border-radius: 2px;
    color: #757575;
  }

  .evaliate-tag-active,
  input[type="checkbox"]:checked ~ span {
    color: #00d1d3;
    background-color: #f5fffd;
    border-color: #00d1d3;
  }
}
</style>
